<template>
  <transition name="">
    <div class="trvelMiddle">
      <v-header title="我的游记" ref="header">
      </v-header>
            <scroll ref="tabTravelScroll" style="overflow: hidden;"
            :data="travelList"
            :scrollbar="false"
            :style="{height: swiperHeight}"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingDown"
            @pullingUp="onPullingUp">
            <div>
                <div class="travelTabWrapper" v-for="item in travelList" :key="item.id" @click="handleGoTravelDesc(item.id)">
                    <div class="travelTabTop">
                        <div class="travelTabTopLeft">
                            <p>{{item.title}}</p>
                        </div>
                        <div class="travelTabTopRight">
                            <p>{{item.userFollow}}</p>
                            <img slot="icon" :src="favoriteImage" style="width:18px; height:15px;margin-left:8px;margin-top: 5px">
                        </div>
                    </div>
                    <div class="travelInfo">
                        <div class="travelInfoLeft">
                            <div class="travelInfoLeftOne">
                                <img :src="item.userHeadUrl" alt="" style="width:40px;height:40px;border-radius: 50%;">
                            </div>
                            <div class="travelInfoLeftTwo">
                                <p>我 在{{item.addressName}}</p>
                            </div>
                        </div>
                        <div class="travelInfoRight">
                            <div class="travelInfoRightOne">
                                <p>{{item.browseCount}}浏览</p>
                            </div>
                            <div class="travelInfoRightTwo">
                                <p>{{item.commentCount}}评论</p>
                            </div>
                        </div>
                    </div>
                    <div class="travelImageWrapper">
                         <div class="travelImage" :style="{backgroundImage:`url(${item.firstImg + '-meitu1'})`}">
                         </div>
                    </div>
                </div>
                <not-data v-if="travelList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetTravel()"></not-data>
            </div>
        </scroll>
        <div class="dynamicPublish" @click="handlePublishTravel" style="border-radius: 50%;">
          <img :src="plusbgImage" alt="">
       </div>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import notData from '@/components/not-data/not-data'
import favoriteImage from '@/assets/img/myhome/favorite.png'
import plusbgImage from '@/assets/img/plusBg.png'
import { Tab, TabItem, Timeline, TimelineItem, Cell, Rater, Swiper, SwiperItem, Badge } from 'vux'
export default {
  data () {
    return {
      plusbgImage: plusbgImage,
      swiperHeight: '500px',
      travelList: [],
      favoriteImage: favoriteImage,
      draftTravelNum: 0
    }
  },
  components: {
    VHeader, Scroll, Tab, TabItem, Timeline, TimelineItem, Cell, Rater, Swiper, SwiperItem, axios, localUser, Badge, notData
  },
  mounted () {
    this.swiperHeight = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
    this.handleGetTravel()
    this.getDraftTravelNum()
  },
  activated () {
    this.handleGetTravel()
    this.getDraftTravelNum()
  },
  computed: {
  },
  methods: {
    // 获取游记接口 0是游记
    handleGetTravel () {
      axios.get(this, '/v1/playStrategy', {articleType: 0, publishUserId: localUser.get('id'), pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        if (data.length === 0) {
          if (this.pageNum === 1) {
            this.$refs.tabTravelScroll.hiddenPullDown()
          } else {
            this.pageNum--
            this.$refs.tabTravelScroll.hiddenPullUpLoad()
          }
        } else {
          if (this.pageNum > 1) {
            this.travelList = this.travelList.concat(data)
          } else {
            this.travelList = data
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.handleGetTravel()
    },
    onPullingDown () {
      this.pageNum = 1
      this.handleGetTravel()
    },
    handleGoTravelDesc (id) {
      this.$router.push('/address/playStrategy/' + id)
    },
    handlePublishTravel () {
      this.$router.push('/address/travelsEdit/0')
    },
    // 获取草稿游记的数量
    getDraftTravelNum () {
      const _self = this
      axios.get(this, '/v1/playStrategyCount', {
        publishUserId: localUser.get('id'),
        publish: 0,
        curUserId: localUser.get('id')
      }, (data) => {
        _self.draftTravelNum = data
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .trvelMiddle{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: $color-background;
    z-index: 101;
  }

.travelTabWrapper {
    margin-bottom 10px
    box-shadow: 0px 0px 15px #C5C5C5;
    background-color white
    .travelTabTop {
        padding-top 15px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        display: flex
        justify-content space-between
        .travelTabTopLeft {
            p {
                font-size $font-size-title
                font-weight bold
            }
        }
        .travelTabTopRight {
            display flex
            img {
                margin-top -4px
            }
        }
    }
    .travelInfo {
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        display flex
        justify-content space-between
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
        .travelInfoLeft {
            display flex
            .travelInfoLeftOne {

            }
            .travelInfoLeftTwo {
                p {
                    font-size $font-size-small
                    margin-left 10px
                    margin-top 10px
                }
            }
        }
        .travelInfoRight {
            display flex
            .travelInfoRightOne {
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
            .travelInfoRightTwo {
                margin-left: 10px
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
        }
    }
    .travelImageWrapper {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
      .travelImage {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
    }
  }

  .dynamicPublish {
    position: absolute
    z-index: 999;
    width: 50px;
    height: 50px;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 50px
      height 51px
      background-size: cover
      background-repeat: no-repeat
    }
  }
</style>
